<template>
	<view class="cu-chat padding-bottom-lg">
		<view class="cu-bar input">
			<input placeholder="留言10分钟内可撤销" v-model="msg" class="bg-gray round padding-left-sm text-left" confirm-type="send" @confirm="sendMsg" :focus="false" maxlength="300" cursor-spacing="10"/>
			<btnLoad btnClass="bg-green" :isLoading="isSending" @btnTap="sendMsg" />
		</view>
		<view class="cu-item" style="padding:15upx 30upx;" v-for="(item,index) in messages" v-if="messages.length > 0" :key="index" :src="item.url">
			<view class="cu-avatar radius" :style="'background-image:url('+item.sender.avatar+');'">
				<view class="cu-tag badge bg-red" v-if="user.id==item.sender.id">{{isSell?'卖家':'买家'}}</view>
			</view>
			<view class="margin-left-sm">
				<view class="margin-bottom-sm" style="word-wrap:break-word;">
					{{item.msg}}<button @tap="delMsg(item.id)" v-if="item.sender.id==uid&GetDateDiffMinute(item.createdAt)<10" class="cu-btn sm bg-red shadow margin-left-xs">撤销</button>
				</view>
				<view class="text-xs text-gray">  
					{{item.sender.id==uid?'我':item.sender.name}}										
					<text class="margin-left-xs">{{GetDateDiff(item.createdAt)}}</text>
				</view>
			</view>								
		</view>
		<view class="text-gray text-center" @tap="toMsg()" v-if="messages.length >= 3">查看全部留言> </view>
		
		<view class="text-gray text-center padding-top-lg text-xl" v-if="messages.length == 0">-- 暂无留言 --</view>
		
	</view>
</template>

<script>
	import * as confirm from '@/common/confirm.js'
	import {getDateDiff,getDateDiffMinute} from '@/utils/date/date.js';	
	import btnLoad from "@/components/btn-load/btn-load.vue";
	
	export default {
		components:{
			btnLoad,
		},
		data() {
			return {
				msg:'',
				messages:[],
				isSending:false,
				baseUrl:'/sell_info/msg'
			};
		},
		name: 'detail-msg',
		props: {
			user:{
				type: Object,
				default: {}
			},
			uid: {
				type: Number,
				default: 0
			},
			infoId:{
				type:Number,
				default:-1
			},
			isSell:{
				type:[Boolean, String],
				default:true
			},
			refresh:{
				type:Boolean,
				default:false
			}
		},
		created() {
			if(!this.isSell){
				this.baseUrl='/buy_info/msg'
			}
			this.loadMessage()
		},
		watch:{
			refresh(val){
				if(val){
					this.loadMessage();
					this.$emit("isrefresh")
				}
			}
		},
		methods: {
			//取得时间间隔
			GetDateDiff:function(e){
				return getDateDiff(e)
			},
			//取得时间间隔
			GetDateDiffMinute:function(e){
				return getDateDiffMinute(e)
			},
			sendMsg(){
				let _this=this
				if(this.msg.trim().length==0){
					uni.showToast({
							title: '信息不能为空',
							icon:'error'
					})
				}else{
					this.isSending=true
					_this.$api.post(this.baseUrl+'/save',{infoId:this.infoId,msg:this.msg}).then(res => {
						if(res.code==200){
							_this.loadMessage();
						}else{
							confirm.error(res.msg)
						}
					}).finally(()=>{
						setTimeout(()=>{
							this.isSending=false
						},200)
					})
				}
			},
			//删除信息
			delMsg(id){
				let _this=this
				confirm.choose("确定删除本条留言?",()=>{
					_this.$api.post(this.baseUrl+'/remove',{infoId:_this.infoId,msgId:id}).then(res => {
						if(res.code==200){
							_this.loadMessage();
						}else{
							uni.showToast({
								title:res.msg,
								icon:'error'
							})
						}						
					})
				})				
			},
			//取得信息列表
			loadMessage(){
				this.$api.post(this.baseUrl+'/list_new',{infoId:this.infoId}).then(res => {
					this.msg=""
					this.messages=res.data.list
					this.$emit('changeMsgCount',res.data.count)
				})
			},
			toMsg(){
				this.$emit("toMsg")
			},
		}
	}
</script>

<style>

</style>
